<template>
     <div>
        <van-nav-bar title="登录" left-text="返回" left-arrow @click-left="back" />
    </div>

    <div class="login">
        <!-- 登录框 -->
        <div class="uerLogin">
            <van-form @submit="Login">
                <van-cell-group inset>
                    <van-field v-model="LoginData.LoginPhone" name="用户名" label="用户名" placeholder="请输入用户名" autocomplete="off" />
                    <van-field v-model="LoginData.LoginPassword" type="password" name="密码" label="密码" placeholder="请输入密码"
                        autocomplete="off" />
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">登录</van-button>
                </div>
                <div style="margin: 16px;" @click="showReg">
                    <van-button round block native-type="submit">
                        注册
                    </van-button>
                </div>
            </van-form>
        </div>
        <!-- 注册弹窗 -->
        <van-popup v-model:show="showBottom" position="bottom" :style="{ height: '40%' }">
            <!-- 注册框 -->
            <div class="useReg">
                <div class="regtitle">注册</div>
                <div>
                    <van-form @submit="register">
                        <van-cell-group inset>
                            <van-field v-model="regData.regPhone" name="手机号" label="手机号" placeholder="手机号"
                                autocomplete="off" />
                            <van-field v-model="regData.regPassword" type="text" name="密码" label="密码" placeholder="密码"
                                autocomplete="off" />
                            <van-field v-model="regData.regNickName" name="昵称" label="昵称" placeholder="昵称"
                                autocomplete="off" />
                        </van-cell-group>
                        <div style="margin: 16px;">
                            <van-button round block type="primary" native-type="submit">
                                注册

                            </van-button>
                        </div>
                    </van-form>
                </div>
            </div>
            <!-- <router-link to="/login"></router-link> -->
        </van-popup>
    </div>
</template>
<script>
import { ref, reactive } from 'vue'
import { post } from '../request'
import { showToast ,showLoadingToast} from 'vant'
import { useRouter } from 'vue-router'
//注册弹窗相关
const showRegEff = () => {
    //控制注册弹窗显示隐藏
    const showBottom = ref(!1)
    //点击显示注册弹窗
    const showReg = () => {
        showBottom.value = !showBottom.value

    }
    return { showBottom, showReg }
}
export default {
    setup() {

        const router = useRouter()
        //返回
        const back = () => {
            router.go(-1);
        }
        //注册需要的参数
        const regData = reactive({
            regPhone: '',
            regPassword: '',
            regNickName: ''
        })
        //登录需要的参数
        const LoginData = reactive({
            LoginPhone:'',
            LoginPassword:''
        })
        //登录方法
        const Login = async () => {
            //判空
            if (LoginData.phone == '' || LoginData.LoginPassword == '' ) {
                showToast('请填写完整信息')
                return
            }
            const res = await post('/login', {
                password: LoginData.LoginPassword,
                phone: LoginData.LoginPhone
            })
            console.log("登录信息",res);
            if(res.data.code ==201){
                showToast('手机号注册')
            }
            if(res.data.code ==200){

                localStorage.tokens = JSON.stringify(res.data.token)
                showLoadingToast({
                    message: '登录中...',
                    forbidClick:true,
                });
                setTimeout(()=>{
                    router.push({name:'Home'})
                },2000)
            }
        }

        //注册方法

        const register = async () => {
            const TestPhome = /^1[3456789]\d{9}$/
            if (!TestPhome.test(regData.regPhone) || regData.regPhone == '') {
                showToast('手机号格式不正确')
                return
            }
            //判断密码
            const TestPassword = /^[A-Za-z][A-Za-z\d]{5}$/
            if (!TestPassword.test(regData.regPassword) || regData.regPassword == '') {
                showToast('密码格式不正确')
                return
            }
            //判断昵称
            const TestNickName = /^[a-zA-Z0-9\u4e00-\u9fa5]{2,10}$/
            if (!TestNickName.test(regData.regNickName) || regData.regNickName == '') {
                showToast('昵称格式不正确')
                return
            }
            //发送请求
            const res = await post('/register',{
                phone:regData.regPhone,
                password:regData.regPassword,
                nickname:regData.regNickName,
            })
            console.log("注册信息",res)
            //注册成功
            if (res.data.code == 100) {
                LoginData.LoginPassword = regData.regPassword
                LoginData.LoginPhone = regData.regPhone
                showToast('注册成功')
                //关闭弹窗
                showReg()
                regData.regNickName = ''
                regData.regPassword = ''
                regData.regPhone = ''
                // showRegEff().showBottom = !1
                //跳转到登录页面
                // setTimeout(() => {
                    // window.location.href = '/login'
                // }, 1000)
            }
        }

        const { showBottom, showReg } = showRegEff()
        return {
            regData, showBottom, showReg,showBottom,register,LoginData,Login,back
        }
    }
}
</script>

<style lang="less" scoped>
.login {
    position: fixed;
    top: 45px;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #fff;
}</style>